<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>江门非遗</title>
    <!-- 先清除后设置 -->
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/jiangmen_index.css">
</head>
<body>
    <!-- 头部容器 -->
    <div class="header-bg">
        <!-- 背景图上覆盖的透明层 -->
        <div class="overlay"></div>
        
        <!-- 内容区域 -->
        <div class="header-content">
            <!-- 中间搜索栏 -->
            <div class="search-container">
                <input type="text" class="search-box" placeholder="搜索非遗项目...">
            </div>
            <!-- 右侧时间显示 -->
            <div class="time-display">
                <div class="date-line" id="currentDate">11月2日，星期日</div>
                <div class="lunar-date" id="lunarDate">农历乙巳年九月十二日</div>
            </div>
        </div>
    </div>
    
    <!-- 悬浮导航框 - 固定在头部背景图容器后面 -->
    <div class="floating-box-nav">
        <a href="#" class="nav-item">首页</a>
        <a href="#" class="nav-item">指南</a>
        <a href="#" class="nav-item">文创</a>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 非遗分类区域 -->
        <div class="category">
            <div class="wrapper">
                <!-- 第一行：上面三个分类 -->
                <div class="category-row">
                    <div class="category-item">
                        <div class="category-item-icon">🔧</div>
                        <h3>传统技艺类</h3>
                        <p>传统手工技艺</p>
                    </div>
                    <div class="category-item">
                        <div class="category-item-icon">🏃</div>
                        <h3>传统体育游艺与杂技类</h3>
                        <p>传统体育与游艺</p>
                    </div>
                    <div class="category-item">
                        <div class="category-item-icon">🎵</div>
                        <h3>传统音乐与传统舞蹈类</h3>
                        <p>音乐舞蹈艺术</p>
                    </div>
                </div>
                <!-- 第二行：下面四个分类 -->
                <div class="category-row">
                    <div class="category-item">
                        <div class="category-item-icon">🎭</div>
                        <h3>民俗类</h3>
                        <p>传统节日习俗</p>
                    </div>
                    <div class="category-item">
                        <div class="category-item-icon">📚</div>
                        <h3>民间文学类</h3>
                        <p>口传文学艺术</p>
                    </div>
                    <div class="category-item">
                        <div class="category-item-icon">💊</div>
                        <h3>传统医药类</h3>
                        <p>传统医疗技艺</p>
                    </div>
                    <div class="category-item">
                        <div class="category-item-icon">🔍</div>
                        <h3>其他类</h3>
                        <p>其他非遗项目</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 精品非遗项目 -->
        <div class="featured">
            <div class="wrapper">
                <!-- 标题 -->
                <div class="hd">
                    <h3>精品非遗项目</h3>
                    <a href="#" class="more">查看全部</a>
                </div>
                <!-- 内容 -->
                <div class="bd">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/新会陈皮制作技艺.jpg" alt="新会陈皮制作技艺">
                                </div>
                                <div class="text">
                                    <h4>新会陈皮制作技艺</h4>
                                    <p><span>国家级非遗</span> · 陈皮制作历史悠久</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/开平碉楼营造技艺.jpg" alt="开平碉楼营造技艺">
                                </div>
                                <div class="text">
                                    <h4>开平碉楼营造技艺</h4>
                                    <p><span>世界遗产</span> · 中西合璧建筑艺术</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/台山浮石飘色.jpg" alt="台山浮石飘色">
                                </div>
                                <div class="text">
                                    <h4>台山浮石飘色</h4>
                                    <p><span>省级非遗</span> · 民间艺术表演</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/鹤山咏春拳.jpg" alt="鹤山咏春拳">
                                </div>
                                <div class="text">
                                    <h4>鹤山咏春拳</h4>
                                    <p><span>省级非遗</span> · 传统武术技艺</p>
                                </div>
                            </a>
                        </li>
                        <!-- 新增的四个精品非遗项目 -->
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/蔡李佛拳.jpg" alt="蔡李佛拳">
                                </div>
                                <div class="text">
                                    <h4>蔡李佛拳</h4>
                                    <p><span>国家级非遗</span> · 传统武术技艺</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/荷塘纱龙.jpg" alt="荷塘纱龙">
                                </div>
                                <div class="text">
                                    <h4>荷塘纱龙</h4>
                                    <p><span>省级非遗</span> · 民间舞蹈艺术</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/礼乐龙舟.jpg" alt="礼乐龙舟">
                                </div>
                                <div class="text">
                                    <h4>礼乐龙舟</h4>
                                    <p><span>市级非遗</span> · 传统体育竞技</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="../CSS/新会葵艺.jpg" alt="新会葵艺">
                                </div>
                                <div class="text">
                                    <h4>新会葵艺</h4>
                                    <p><span>省级非遗</span> · 传统手工艺</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 非遗地图 -->
        <div class="map">
            <div class="wrapper">
                <!-- 标题 -->
                <div class="hd">
                    <h3>江门非遗分布地图</h3>
                    <p>探索江门各区市的非物质文化遗产</p>
                </div>
                <!-- 内容 - 分为两行 -->
                <div class="bd">
                    <!-- 第一行：上面四个内容 -->
                    <div class="map-row">
                        <div class="map-item">
                            <h4>蓬江区</h4>
                            <p>蔡李佛拳、荷塘纱龙等</p>
                        </div>
                        <div class="map-item">
                            <h4>江海区</h4>
                            <p>礼乐龙舟、外海茶果等</p>
                        </div>
                        <div class="map-item">
                            <h4>新会区</h4>
                            <p>新会陈皮、葵艺等</p>
                        </div>
                        <div class="map-item">
                            <h4>台山市</h4>
                            <p>浮石飘色、台山民歌等</p>
                        </div>
                    </div>
                    <!-- 第二行：下面三个内容 -->
                    <div class="map-row">
                        <div class="map-item">
                            <h4>开平市</h4>
                            <p>开平碉楼营造技艺等</p>
                        </div>
                        <div class="map-item">
                            <h4>鹤山市</h4>
                            <p>鹤山咏春拳、三夹腾龙等</p>
                        </div>
                        <div class="map-item">
                            <h4>恩平市</h4>
                            <p>恩平粤剧、木鱼书等</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="footer">
            <div class="wrapper">
                <p>© 2023 江门市非物质文化遗产保护中心 版权所有</p>
                <p>联系电话：0750-12345678 | 地址：广东省江门市 | 邮编：529000</p>
            </div>
        </div>
    </div>

    <script>
        // 更新时间显示
        function updateDateTime() {
            const now = new Date();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekday = weekdays[now.getDay()];
            
            document.getElementById('currentDate').textContent = `${month}月${day}日，${weekday}`;
        }
        
        // 初始化时间
        updateDateTime();
        
        // 每分钟更新一次时间
        setInterval(updateDateTime, 60000);
    </script>
</body>
</html>